<template>
  <div class="addCategoryModal">
    <a-modal
      :visible="addCategoryModal"
      title="添加分类"
      @cancel="cancel"
      @ok="addCategorys"
      :destroyOnClose="destory"
    >
      <a-form-model
        id="components-form-demo-normal-login"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="ruleForm"
        :model="categoryData"
        :rules="rules"
        class="login-form"
      >
        <a-form-model-item label="父级分类" prop="parentCategory">
          <a-cascader
            v-model="categoryData.parentCategory"
            :options="options"
            placeholder="请选择父级分类"
            change-on-select
            @change="onChange"
            :field-names="{ label: 'name', value: '_id', children: 'children' }"
          />
        </a-form-model-item>
        <a-form-model-item label="分类名称" prop="name">
          <a-input v-model="categoryData.name" placeholder="请输入分类名称">
            <a-icon slot="prefix" type="unordered-list" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {
  addCategory
} from '@/network/categorys.js'
export default {
  name: 'addCategory',
  data () {
    return {
      addCategoryModal: false,
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 15
      },
      categoryData: {
        name: '',
        parentCategory: []
      },
      rules: {
        name: [
          { required: true, message: '请输入分类名称!', trigger: 'blur' },
        ],
        parentCategory: [
          { required: true, message: '请选择父级分类!', trigger: 'blur' },
        ]
      },
      options: this.saveCategoryList,
      destory: true
    };
  },
  props: {
    saveCategoryList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    saveCategoryList (val) {
      this.options = val
    }
  },
  computed: {

  },
  methods: {
    cancel () {
      this.addCategoryModal = false
    },
    show () {
      this.addCategoryModal = true
      this.categoryData.name = ''
      this.categoryData.parentCategory = []
    },
    addCategorys () {
      const params = {
        parentId: this.categoryData.parentCategory[this.categoryData.parentCategory.length - 1],
        name: this.categoryData.name
      }
      addCategory(params).then(res => {
        console.log(res)
        if (res.data.status === 200) {
          this.$message.success('添加分类成功')
          this.addCategoryModal = false
        }
      })
      this.$emit("refreshTable")
    },
    onChange (value) {
      console.log(value)
    },

  },
  components: {

  },
};
</script>

<style scoped>
</style>
